import { cn } from '@/lib/utils';
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
import { firstCase } from '@/helpers';

interface TaskPerformerProp {
  performers: TaskPerformer[];
  className?: string;
  dark?: boolean;
}

export const TaskCardExecutor = ({ performers, className, dark }: TaskPerformerProp) => {
  const cll = 'flex -space-x-2 overflow-hidden';

  const slicePerformers = performers.length > 3 ? performers.slice(0, 2) : performers.length === 3 ? performers : performers

  if (performers.length === 0) {
    return null
  }

  return <div className={cn(cll, className)} >{
    performers.length < 3 ?
      performers.map((performer, i) => <Avatar key={+performer.id + i * 2} className={`inline-block h-6 w-6 rounded-full ring-2 ${dark ? 'ring-[#B0C1D2]' : 'ring-white'}`} >
        <AvatarImage src={`${'https://u13-crm-test.gexarus.com'}${performer.image}`} className='object-cover' />
        <AvatarFallback>{firstCase(performer.name)}</AvatarFallback>
      </Avatar>)
      : <>{slicePerformers.map((performer, i) => <Avatar key={+performer.id + i * 2}  className={`inline-block h-6 w-6 rounded-full ring-2 ${dark ? 'ring-[#B0C1D2]' : 'ring-white'}`} >
        <AvatarImage src={`${'https://u13-crm-test.gexarus.com'}${performer.image}`} className='object-cover' />
        <AvatarFallback>{firstCase(performer.name)}</AvatarFallback>
      </Avatar>)}
        {
          performers.length > slicePerformers.length ? <Avatar className='inline-block h-6 w-6 rounded-full ring-2 ring-white'>
            <AvatarImage src={``} className='object-cover' />
            <AvatarFallback>+{performers.length - slicePerformers.length}</AvatarFallback>
          </Avatar> : null
        }
      </>
  }</div>
};
